<script lang="ts" setup>
import type { PositionItem } from "./apis/type"
import { ElButton } from "element-plus"
import { onMounted, ref, watch } from "vue"
import { usePositionStudentStore } from "@/pinia/stores/position-student"
import PositionDetail from "./components/PositionDetail.vue"
import PositionList from "./components/PositionList.vue"

defineOptions({ name: "PositionStudent" })

const positionStore = usePositionStudentStore()
const selectedId = ref<number | null>(null)

function onSelect(item: PositionItem) {
  selectedId.value = item.positionId
  positionStore.fetchPositionDetail(item.positionId)
}

// 监听列表数据变化，当列表加载完成后自动选择第一个项目
watch(
  () => positionStore.list,
  async (newList) => {
    // 只有当没有选中项且列表不为空时才自动选择第一个
    if (newList && newList.length > 0 && selectedId.value === null) {
      const firstItem = newList[0]
      onSelect(firstItem)
    }
  },
  { immediate: true }
)

onMounted(async () => {
  await positionStore.fetchOptions()
  await positionStore.fetchList(true)
})
</script>

<template>
  <div class="student-page">
    <div class="student-banner">
      <div class="page-container">
        <div class="banner-controls taller">
          <div class="filters">
            <ElSelect
              v-model="positionStore.query.positionType"
              size="large"
              class="control-sm"
              placeholder="岗位类型"
              clearable
              @change="positionStore.fetchList(true)"
            >
              <ElOption v-for="pt in positionStore.positionTypeOptions" :key="pt.value" :label="pt.label" :value="pt.value" />
            </ElSelect>

            <ElSelect
              v-model="positionStore.query.workType"
              size="large"
              class="control-sm"
              placeholder="工作类型"
              clearable
              @change="positionStore.fetchList(true)"
            >
              <ElOption v-for="t in positionStore.workTypeOptions" :key="t.value" :label="t.label" :value="t.value" />
            </ElSelect>

            <ElSelect
              v-model="positionStore.query.workCity"
              size="large"
              class="control-sm"
              placeholder="工作城市"
              clearable
              filterable
              @change="positionStore.fetchList(true)"
            >
              <ElOption v-for="c in positionStore.workCityOptions" :key="c.value" :label="c.label" :value="c.value" />
            </ElSelect>

            <ElSelect
              v-model="positionStore.query.period"
              size="large"
              class="control-sm"
              placeholder="实习周期"
              clearable
              @change="positionStore.fetchList(true)"
            >
              <ElOption v-for="p in positionStore.periodOptions" :key="p.value" :label="p.label" :value="p.value" />
            </ElSelect>

            <ElSelect
              v-model="positionStore.query.salary"
              size="large"
              class="control-sm"
              placeholder="实习薪资"
              clearable
              @change="positionStore.fetchList(true)"
            >
              <ElOption v-for="s in positionStore.salaryOptions" :key="s.value" :label="s.label" :value="s.value" />
            </ElSelect>

            <ElSelect
              v-model="positionStore.query.isFavorite"
              size="large"
              class="control-sm"
              placeholder="我的收藏"
              clearable
              @change="positionStore.fetchList(true)"
            >
              <ElOption label="是" :value="1" />
              <ElOption label="否" :value="0" />
            </ElSelect>
          </div>

          <!-- 查询（在后面） -->
          <div class="search">
            <ElInput
              v-model="positionStore.query.keyword"
              size="large"
              class="search-input"
              placeholder="搜索职位关键词"
              clearable
              @keyup.enter="positionStore.fetchList(true)"
            />
            <ElButton type="primary" size="large" @click="positionStore.fetchList(true)">
              搜索
            </ElButton>
            <ElButton class="reset-tag" type="info" size="large" effect="plain" @click="positionStore.resetFilters">
              重置
            </ElButton>
          </div>
        </div>
      </div>
    </div>

    <div class="page-container">
      <div class="pane">
        <PositionList
          :items="positionStore.list"
          :loading="positionStore.loading"
          :total="positionStore.total"
          :selected-id="selectedId"
          @select="onSelect"
          :max-width="400"
          @load-more="positionStore.loadMore"
        />
        <div class="pane-right">
          <PositionDetail />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.student-page {
  background-color: #f7f8fa;
  min-height: calc(100vh - 64px);
}

.student-banner {
  position: sticky;
  top: 0;
  z-index: 9;
  background: linear-gradient(90deg, #f0f6ff 0%, #f7fbff 100%);
  border-bottom: 1px solid #eef2f7;
}

.page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
}

.banner-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.control-sm {
  width: 120px; /* 筛选更窄 */
}

.search-input {
  width: 240px; /* 查询更窄 */
}

.reset-tag {
  cursor: pointer;
  user-select: none;
}

/* 提高整体控件高度（在 size="large" 基础上再加高） */
.taller {
  --el-component-size: 42px;
}

/* 列表与右侧面板 */
.pane {
  display: flex;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 10px;
}

.pane-right {
  width: 100%;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 12px;
  min-height: 240px;
}

/* 其他样式保持不变，以下为列表相关样式片段 */
.desc {
  color: #4b5563;
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 兼容性注意：旧版浏览器不支持，多数现代浏览器都支持 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag {
  background-color: #f3f6fb;
  color: #3b82f6;
  border: 1px solid #e5edf9;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.sentinel {
  height: 1px;
}

.list-footer {
  text-align: center;
  color: #6b7280;
  padding: 8px 0 0;
}
</style>
